<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的邀请</span>
      </div>
      <div class="acquired">
        <i class="el-icon-wallet"></i>
        <p>获取侦迹币：600</p>
      </div>
      <div class="search">
        时间：
        <div class="time-search">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        用户ID：
        <div class="size-search">
          <el-input v-model="input" placeholder="请输入用户ID"></el-input>
        </div>
        <p class="ser-btn">搜 索</p>
        <p class="heavy-btn">重 置</p>
      </div>
      <div class="Select">
        <p
          v-for="(item, index) in selectArr"
          :key="index"
          :class="select == item.id ? 'select-p' : ''"
          @click="handelSelect(item.id)"
        >
          {{ item.name }}
        </p>
        <i v-if="reveal == '2'" class="el-icon-close" @click="handelBack"></i>
      </div>
    </div>
    <div class="body-box">
      <!-- 表格 -->
      <div class="tabulation">
        <tableInvite
          v-if="reveal == '1'"
          :tableData="tableData"
          :select="select"
          @handelClickName="handelClickName"
        ></tableInvite>
        <detailsTable
          v-if="reveal == '2'"
          :tableData="DetailsData"
          @handelClickName="handelClickName"
        ></detailsTable>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <div class="paging-body">
          <paging :pagingObj="pagingObj" @pageVal="pageVal"></paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import paging from "../../../../components/paging.vue";
import tableInvite from "./components/tableInvite.vue";
import detailsTable from "./components/detailsTable.vue";
export default {
  data() {
    return {
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
      value1: "", // 时间搜索
      input: "", // 用户id搜索
      selectArr: [
        { name: "会员信息(10)", id: "1" },
        { name: "个人(10)", id: "2" },
        { name: "企业(0)", id: "3" },
      ],
      select: "1", // 筛选
      tableData: [
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
        {
          name: "张三",
          id: "1234567890",
          type: "个人",
          time: "2016年05月02日10:20",
        },
      ], //表格数据
      DetailsData: [
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
        {
          time: "2016年05月02日10:20",
          num: "123456789",
          amount: "300",
          type: "充值侦迹币",
          way: "支付宝",
          royalty: "10",
        },
      ], // 提成详情数据
      reveal: "1", // 进入到提成页面出现x点击返回
    };
  },
  components: { paging, tableInvite, detailsTable },
  methods: {
    // 点击查看提成详情
    handelClickName(val) {
      this.reveal = "2";
    },
    // 返回到正常表格
    handelBack() {
      this.reveal = "1";
    },
    pageVal(val) {
      this.pagingObj.currentPage = val;
    },
    //筛选
    handelSelect(num) {
      this.select = num;
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    // margin: auto;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
    .acquired {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: flex-end;
      // position: relative;
      text-align: right;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      .el-icon-wallet {
        font-size: 30px;
        color: #3894ff;
        margin-right: 10px;
      }
    }
    .search {
      font-size: 14px;
      .time-search {
        width: 300px;
        height: 35px;
        margin-right: 10px;
      }
      .size-search {
        width: 200px;
        height: 30px;
        font-size: 14px;
        /deep/.el-input__inner {
          height: 35px !important;
        }
      }
      .ser-btn {
        width: 60px;
        height: 35px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        margin-left: 10px;
        // border: 1px solid #3291f8;
        background-color: #3894ff;
        border-radius: 5px;
      }
      .heavy-btn {
        margin-left: 10px;
        color: #e99d42;
      }
    }
    .Select {
      margin-top: 10px;
      display: flex;
      position: relative;
      p {
        font-size: 16px;
        margin-left: 40px;
      }
      p:nth-child(1) {
        margin-left: 0px;
      }
      .select-p {
        color: #3894ff;
      }
      .el-icon-close {
        font-size: 24px;
        font-weight: 600;
        position: absolute;
        right: 0;
        top: 15px;
      }
    }
  }
}
.body-box {
  width: 93%;
  min-height: 500px;
  // max-height: 650px;
  margin: auto;
  margin-top: 10px;
  //表格区
  .tabulation {
    min-height: 500px;
  }
  // 底部div放分页
  .paging {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 30px;
    display: flex;
    .paging-body {
      width: 100%;
      right: 0px;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      margin: auto;
    }
  }
}
</style>
